<template>
	<div v-if="state.isLoading" id="cif-loadding" class="loading">
		<div class="g-container">
			<div class="g-number">{{ state.progress }}%</div>
			<div class="g-contrast">
				<div class="g-circle" />
				<!--         <ul class="g-bubbles">
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
          </ul> -->
			</div>
		</div>
		<!-- <div class="fade-out">
      <canvas
        ref="webgl"
        width="1920"
        height="1080"
      />
      <script
        ref="vertexShader"
        type="x-shader/x-vertex"
      >
        attribute vec4 position;
        attribute float scale;
        uniform mat4 modelViewMatrix;
        uniform mat4 projectionMatrix;
        void main() {
        vec4 mvPosition = modelViewMatrix * position;
        gl_PointSize = scale*1.0 * ( 200.0 / - mvPosition.z );
        gl_Position = projectionMatrix * mvPosition;
        }
      </script>
      <script
        ref="fragmentShader"
        type="x-shader/x-fragment"
      >
        void main() {
        if ( length( gl_PointCoord - vec2( 0.5, 0.5 ) ) > 0.49 ) discard;
        gl_FragColor = vec4(0.0,1.0,1.0,1.0);
        }
      </script>
    </div> -->
	</div>
</template>

<script>
export default { name: 'Loading' };
</script>
<script setup>
import { onBeforeMount, defineEmits, reactive, toRefs } from 'vue';
import Notifier from '@CIF/Utils/Notifier';

const emit = defineEmits(['update:show']);

const state = reactive({
	gl: undefined,
	program: undefined,
	camera: undefined,
	mat4: undefined,
	mat4y: undefined,
	projectionMatrixLoc: undefined,
	modelViewMatrixLoc: undefined,
	colorBuffer: undefined,
	buffer: undefined,
	SEPARATION: 100,
	AMOUNTX: 50,
	AMOUNTY: 50,
	positions: undefined,
	scales: undefined,
	count: 0,
	mouseX: 0,
	frameID: undefined,
	progress: 0,
	isLoading: true
});

onBeforeMount(() => {
	Notifier.notifyComponentFetchingPercent((fetchingProgress) => {
		state.progress = fetchingProgress?.toFixed(1);
	});

	Notifier.notifyWhenComponentFinishLoading(() => {
		cancelAnimationFrame(state.frameID);
		console.log('cancelAnimationFrame');
		emit('update:show', false);
		document.getElementById('cif-loadding') &&
			document.getElementById('cif-loadding').classList.remove('fade-out');
		state.isLoading = false;
	}, 'loading');
});
defineExpose({ ...toRefs(state) });
</script>

<style lang="scss" scoped>
.loading {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
.fade-out {
	width: 100%;
	height: 100%;
	opacity: 1;
	animation-name: fadeOut;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
	animation-delay: 0.2s;
}
@keyframes fadeOut {
	100% {
		opacity: 0;
	}
}
html,
body {
	width: 100%;
	height: 100%;
	display: flex;
	background: rgba(0, 0, 0, 0.8);
	overflow: hidden;
}

.g-number {
	position: absolute;
	width: 300px;
	top: 26%;
	text-align: center;
	font-size: 32px;
	z-index: 10;
	color: #fff;
}

.g-container {
	position: absolute;
	width: 300px;
	height: 400px;
	top: calc(50% - 150px);
	left: calc(50% - 150px);
}

.g-contrast {
	filter: contrast(10) hue-rotate(0);
	width: 300px;
	height: 400px;
	/* background-color: #000; */
	background-color: transparent;
	overflow: hidden;
	animation: hueRotate 10s infinite linear;
}

.g-circle {
	position: relative;
	width: 300px;
	height: 300px;
	box-sizing: border-box;
	filter: blur(8px);

	&::after {
		content: '';
		position: absolute;
		top: 40%;
		left: 50%;
		transform: translate(-50%, -50%) rotate(0);
		width: 200px;
		height: 200px;
		background-color: #00ff6f;
		border-radius: 42% 38% 62% 49% / 45%;
		animation: rotate 10s infinite linear;
	}

	&::before {
		content: '';
		position: absolute;
		width: 176px;
		height: 176px;
		top: 40%;
		left: 50%;
		transform: translate(-50%, -50%);
		border-radius: 50%;
		background-color: #000;
		z-index: 10;
	}
}

.g-bubbles {
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 100px;
	height: 40px;
	transform: translate(-50%, 0);
	border-radius: 100px 100px 0 0;
	background-color: #00ff6f;
	filter: blur(5px);
}

li {
	position: absolute;
	border-radius: 50%;
	background: #00ff6f;
}

@for $i from 0 through 15 {
	li:nth-child(#{$i}) {
		$width: 15 + random(15) + px;
		left: 15 + random(70) + px;
		top: 50%;
		transform: translate(-50%, -50%);
		width: $width;
		height: $width;
		animation: moveToTop #{random(6) + 3}s ease-in-out -#{calc(random(5000) / 1000)}s infinite;
	}
}

@keyframes rotate {
	50% {
		border-radius: 45% / 42% 38% 58% 49%;
	}
	100% {
		transform: translate(-50%, -50%) rotate(720deg);
	}
}

@keyframes moveToTop {
	90% {
		opacity: 1;
	}
	100% {
		opacity: 0.1;
		transform: translate(-50%, -180px);
	}
}

@keyframes hueRotate {
	100% {
		filter: contrast(15) hue-rotate(360deg);
	}
}
</style>
